<template>
    <div>
        <el-dialog v-model="dialogVisible" title="配置">
            <div class="yxj-config-form">
                <el-form
                    :disabled="running"
                    label-position="top"
                    label-width="120px"
                >
                    <el-form-item label="预选">
                        <el-select
                            v-model="preSelect"
                            placeholder="请选择"
                            class="w-[200px] mr-2"
                        >
                            <el-option
                                :key="'pre' + i"
                                v-for="(v, i) in preData"
                                :label="v.label"
                                :value="i"
                            >
                            </el-option>
                        </el-select>
                        <el-button @click="selectOk">加载</el-button>
                    </el-form-item>
                    <el-form-item label="内存位数">
                        <el-input-number
                            v-model="config.addLen"
                            :min="1"
                            :max="10"
                        />
                    </el-form-item>
                    <el-form-item label="数据段大小">
                        <el-input-number
                            v-model="config.dataSize"
                            :min="1"
                            :max="2 ** config.addLen - 1"
                        />
                    </el-form-item>
                    <el-form-item label="起始地址">
                        <el-select
                            v-model="config.codeStart"
                            placeholder="请选择"
                            class="w-[200px]"
                        >
                            <el-option
                                :key="'op' + i"
                                v-for="i in 2 ** config.addLen"
                                :label="D2B(i - 1, config.addLen)"
                                :value="i - 1"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="指令">
                        <el-input
                            style="width: 100%"
                            v-model="codes"
                            resize="none"
                            :autosize="{ minRows: 10 }"
                            type="textarea"
                        />
                    </el-form-item>
                    <div class="flex justify-end">
                        <el-button type="primary" @click="onSubmit"
                            >应用</el-button
                        >
                    </div>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog
            title="指令说明"
            v-model="readmeVisible"
            style="width: 900px"
        >
            <Readme />
        </el-dialog>
        <div class="controls">
            <el-button type="primary" @click="readmeVisible = true"
                >查看指令说明</el-button
            >
            <el-button
                :disabled="running"
                type="primary"
                @click="dialogVisible = true"
                >显示配置</el-button
            >
            <el-button :disabled="running" type="primary" @click="start">{{
                running ? '运行中' : '开机'
            }}</el-button>
            <el-button :disabled="!running" type="primary" @click="end">{{
                running ? '停机' : '未运行'
            }}</el-button>
            <el-button
                :disabled="!running || inputing"
                type="primary"
                @click="oneStep"
                >运行到结束</el-button
            >
            <el-button
                :disabled="!running || inputing"
                type="primary"
                @click="nextRun"
                >下一步</el-button
            >
        </div>
        <div class="status-msg mt-4">{{ statusMsg }}</div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { D2B } from '../../utils/binaryConvert'
import preData from './core/pre'
import { IConfig } from './interfaces'
import Readme from './core/Readme.vue'

const { props } = defineProps<{
    props: {
        statusMsg: string
        running: boolean
        inputing: boolean
        oneStep: () => Promise<void>
        nextRun: () => Promise<'error' | 'ok'>
        end: () => void
        start: () => void
        updateConfig: (config: IConfig) => void
    }
}>()
const {
    statusMsg,
    running,
    inputing,
    oneStep,
    nextRun,
    end,
    start,
    updateConfig,
} = props

// 配置，从外部配置
const config = reactive({
    addLen: preData[0].addLen, // 地址位数
    dataSize: preData[0].dataSize, // 内存中数据区域的长度
    codeStart: preData[0].codeStart, // 代码区域的开始位置
})

// 代码，从外部配置
const codes = ref(preData[0].codes)

const dialogVisible = ref(false)
const readmeVisible = ref(false)

// 预选项选择
const preSelect = ref(0)
const selectOk = () => {
    let index = preSelect.value
    config.addLen = preData[index].addLen // 地址位数
    config.dataSize = preData[index].dataSize // 内存中数据区域的长度
    config.codeStart = preData[index].codeStart // 代码区域的开始位置
    codes.value = preData[index].codes
}

const onSubmit = () => {
    dialogVisible.value = false
    // 提交配置
    updateConfig({
        addLen: config.addLen,
        dataSize: config.dataSize,
        codeStart: config.codeStart,
        codes: codes.value,
    })
}
</script>

<style scoped></style>
